<template>
  <div class="main">
    <div class="content">
      <van-nav-bar left-arrow @click-left="onClickLeft" />
      <h1 class="Login-title">知乎日报</h1>
      <div class="formLogin">
        <van-form>
          <van-cell-group inset>
            <van-field v-model="phone" name="phone" label="手机号" placeholder="手机号" />
            <van-field
              v-model="password"
              type="password"
              name="password"
              label="密码"
              placeholder="密码"
            />
          </van-cell-group>
          <div class="btn">
            <van-button color="rgb(25, 137, 250)" class="btn1" @click="toLogin()">登录</van-button>
            <van-button color="rgb(25, 137, 250)" class="btn2" @click="toReg()" plain>注册</van-button>
          </div>
        </van-form>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      password: "",
      phone: "",
      user: {}
    };
  },
  methods: {
    toLogin() {
      if (this.password == "" || this.phone == "") {
        console.log("手机号或密码不能为空");
        return;
      }
      if (!localStorage.getItem("user")) {
        console.log("请先注册");
        return;
      }
      let LocalUser = JSON.parse(localStorage.getItem("user"));
      if (
        LocalUser.phone == this.phone &&
        LocalUser.password == this.password
      ) {
        localStorage.setItem("isLogin", true);
        this.$router.push({
          name: "My"
        });
      } else {
        console.log("请先注册");
      }
    },
    toReg() {
      if (this.password == "" || this.phone == "") {
        console.log("手机号或密码不能为空");
        return;
      }
      this.user.phone = this.phone;
      this.user.password = this.password;
      localStorage.setItem("user", JSON.stringify(this.user));
      this.password = "";
      this.phone = "";
    },
    onClickLeft() {
      history.back();
    }
  }
};
</script>
<style lang="less" scoped>
.content {
  height: 100vh;
  width: 100vw;
  background-image: url("../assets/sign_bg.db29b0fb.png");
  background-size: 250%;
}
/deep/.van-nav-bar .van-icon {
  color: #000;
}
/deep/.van-nav-bar__arrow {
  font-size: 25px;
}
.Login-title {
  text-indent: -999px;
  margin-top: 10px;
  text-align: center;
  color: rgb(25, 137, 250);
  height: 200px;
  background: url("../assets/logo_big.png") no-repeat center;
  background-size: 50%;
  z-index: 999;
}
.formLogin {
  margin-top: 10px;
}
.van-cell {
  padding: 0.5rem 0.42667rem;
}
.btn {
  margin: 20px;
  display: flex;
  justify-items: center;
  align-items: center;
  .btn1 {
    width: 90px;
    margin-left: auto;
    margin-right: 50px;
  }
  .btn2 {
    width: 90px;
    margin-right: auto;
  }
}
</style>